<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饼状图</title>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:100%; height:400px;"></div>
<script type="text/javascript">
    window.onload = function pie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        //声明一个对象
        var list = [];
        var nus = [];
        $.ajax({
            async: true,            //异步请求
            data: {},
            //请求方式get
            type: "GET",
            //请求地址
            url: "/count/count1",
            //数据，json字符串
            dataType: "json",
            //请求成功
            success: function (result) {
                $.each(result, function (index, item)
                {
                    list.push(item.word);
                    nus.push({
                        value: item.count,
                        name: item.word,
                    });
                });
                myChart.hideLoading();    //隐藏加载动画

                var option = {
                    title: {
                        text: '职位',
                        left: 'center'
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                        // 计算占比%
                    },

                    legend: {                 //旁边的小标图
                        orient: 'vertical',
                        right: 10,
                        top: 300,
                        //添加物品名
                        data: list
                    },
                    series: [
                        {
                            name: '饼图',
                            type: 'pie',     // 设置图表类型为饼图
                            radius: '55%',      //饼图的半径，外半径为可视区尺寸的长度。
                            // roseType: 'angle',           //设置图表类型为南丁格尔图
                            avoidLabelOverlap: false,
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(200, 0, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20

                            },
                            data: nus
                        }
                    ]
                };
                myChart.setOption(option);
            },
            error: function (errorMsg) {
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };
</script>
</body>
</html>
